/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */

$bg: #283443;
$light_gray: #fff;
$cursor: #fff;
$input_height: 38px;

@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
  .login-container .el-input input {
    color: $cursor;
  }
}

/* reset element-ui css */
.login-container {
  .el-input {
    padding-top: 0px;
    display: inline-block;
    height: $input_height;
    width: 85%;

    input {
      background: rgba(255, 255, 255, 0.2);
      background-color: transparent;
      border: 0px;
      -webkit-appearance: none;
      border-radius: 6px;
      padding: 0px 10px;
      color: $light_gray;
      height: $input_height;
      caret-color: $cursor;

      &:-webkit-autofill {
        box-shadow: 0 0 0px 1000px $bg inset !important;
        -webkit-text-fill-color: $cursor !important;
      }
    }
  }

  .el-form-item {
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
    color: #454545;
  }
}
